<!--事件搜索
@search=
:keyValue=
-->
<template>
  <div class="search-head">
    <div class="search-box iconfont icon-sousuo">
        <input class="search-input" type="search" v-model="value" placeholder="搜索内容"
               @focus="focus"  @blur="blur" v-focus-bottom
               @change="search" @keyup.13="search" >
    </div>
    <div class="cover" v-if="cover" style="height: calc(100% - 40px);height: -moz-calc(100% - 40px);height: -webkit-calc(100% - 40px);"></div>
  </div>
</template>

<script>
    export default {
        props:['keyword'],
        data(){
            return {
                value:'',
                cover:false,
            }
        },
        mounted(){
            this.value = this.keyword
        },
        watch: {
            'keyword':function(cur,old){
                this.value = cur
            }
        },
        methods: {
            search(){
                this.$emit('search',this.value)
                this.cover = false
            },
            focus(){
                this.cover = true
            },
            blur(){
                this.cover = false
            },
        }
    }
</script>
<style  lang="less" scoped>
.search-head{
  z-index: 1000;
    height:40px;
    padding:5px 15px;
    width:100%;
    box-sizing:border-box;
    background:#fff;
    .cover{
        position:fixed;
        left:0;top:40px;
        width:100%;
        height:calc(100% - (40px));
        height: -moz-calc(100% - (40px));
        height: -webkit-calc(100% - (40px));
        min-height:80%;
        background:rgba(0,0,0,.7);z-index:99
    }
    .search-box:before{
        color:#999;
        font-size: 14px;
        margin-left: -20px;
    }
    .search-box{
    height:30px;
    border-radius:35px;
    background : #f9f9f9;
    padding:8px 20px 8px 40px;
    box-sizing:border-box;
    .search-input{
        width: 100%;
        border: 0;
        outline: oldlace;
        background: #f9f9f9;
        padding-left: 5px;
        line-height: 15px;
        font-size: 13px;
    }
    }
  }
</style>
